<script setup lang="ts">

import * as THREE from "three"
import {onMounted} from "vue";
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader";
import {Group, Object3D} from "three";
import GUI from "three/examples/jsm/libs/lil-gui.module.min";

onMounted(() => {

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, document.getElementById("scene2").offsetWidth / document.getElementById("scene2").offsetHeight, 0.1, 1000)
  const render = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
  });
  render.setSize(document.getElementById("scene2").offsetWidth, document.getElementById("scene2").offsetHeight)
  render.shadowMap.enabled = true
  document.getElementById("scene2").appendChild(render.domElement)

  camera.position.set(-1, 2, 8);

  const grid = new THREE.GridHelper(10)
  // scene.add(grid)

  const control = new OrbitControls(camera, render.domElement);
  control.update();

  const am = new THREE.AmbientLight("#fff", 2);
  scene.add(am)
  control.target.y = -0.5
  control.enabled = false

  const box = new THREE.Mesh(new THREE.BoxGeometry(1.5, 1.5, 1.5), new THREE.MeshStandardMaterial({color: "#38f"}))
  scene.add(box)

  let zhuti: Object3D | null = null;
  let houtou: Object3D | null = null;
  let lifangti: Object3D | null = null;
  let zhuiti: Object3D | null = null;

  const gltfLoader = new GLTFLoader();
  let obj: Group | null = null;
  gltfLoader.load("/xxxxx.glb", gltf => {
    obj = gltf.scene;
    scene.add(gltf.scene)
    gltf.scene.traverse(node => {
      node.max = Math.random() * 0.1 + 0.1;
      node.speed = Math.random() * 0.003
      node.state = parseInt(Math.random() * 10) % 2 === 0
      if (node.name === '柱体') zhuti = node;
      if (node.name === '猴头') houtou = node;
      if (node.name === '立方体') lifangti = node;
      if (node.name === '锥体') zhuiti = node;
    })
  })

  const light = new THREE.DirectionalLight("#fff", 1)
  light.castShadow = true;
  light.position.set(0, 500, 0)

  // 配置阴影相机

  scene.add(light)

  const chelper = new THREE.CameraHelper(light.shadow.camera);
  // scene.add(chelper)

  const h = new THREE.DirectionalLightHelper(light);
  // scene.add(h);

  // 创建dat.GUI界面
  //   const gui = new GUI();
  //   const cameraFolder = gui.addFolder('Camera Position');
  //   cameraFolder.add(camera.position, "x", -100, 100);
  //   cameraFolder.add(camera.position, 'y', -100, 100);
  //   cameraFolder.add(camera.position, 'z', -100, 100);
  //   cameraFolder.open();
  const maxYRotation = 2 * Math.PI;

  let currentYRotation = 0;
  let toYRotation = 0;

  let currentScroll = 0;
  let toScroll = 0;

  var state = 1;
  const fn = () => {
    requestAnimationFrame(fn)
    render.render(scene, camera);
    control.update()
    if (obj) {
      toYRotation += (currentYRotation - toYRotation) * 0.05
      obj.rotation.y = toYRotation;

      toScroll += (currentScroll - toScroll) * 0.05;
      document.getElementById("scroll4").scrollTop = toScroll

    }
    [zhuti, houtou, zhuiti, lifangti].forEach(node => {
      if (node) {
        if (node.state === 1) {
          node.position.y += node.speed;
        } else {
          node.position.y -= node.speed;
        }
        if (node.position.y >= node.max) {
          node.state = -1;
        }
        if (node.position.y <= -node.max) {
          node.state = 1;
        }
      }
    })

  }
  fn();
  document.getElementById("scroll3").addEventListener("scroll", (e: Event) => {
    const target = e.target as HTMLElement;
    const p = target.scrollTop / (target.scrollHeight - window.innerHeight);
    document.getElementById("scroll4").scrollTop = target.scrollTop;

    currentYRotation = maxYRotation * p
    currentScroll = target.scrollTop;
  })

})

</script>

<template>
  <div style="height: 100%;overflow: hidden">
    <div id="scene2" style="position: absolute;top:0;left:0;z-index:9"></div>

    <div id="scroll4" style="position: absolute;width: 100%; height: 100%;left:0;top:0;overflow: auto;z-index: 1">
      <div style="height: 400vh;font-size:20px;letter-spacing: 50px;padding-left: 50px;line-height: 180px;">

        <div style="height: 100vh;
        font-weight: bold;color:rgb(27, 90, 212);
        display: flex;flex-direction: column;align-items: center;justify-content: center;">
          <h1>THIS</h1>
          <h1>IS A</h1>
          <h1>DEMO</h1>
        </div>
        <div style="height: 100vh;
        font-weight: bold;color:rgb(27, 90, 212);
        display: flex;flex-direction: column;align-items: center;justify-content: center;">
          <h1>1</h1>
        </div>
        <div style="height: 100vh;
        font-weight: bold;color:rgb(27, 90, 212);
        display: flex;flex-direction: column;align-items: center;justify-content: center;">
          <h1>2</h1>
        </div>
        <div style="height: 100vh;
        font-weight: bold;color:rgb(27, 90, 212);
        display: flex;flex-direction: column;align-items: center;justify-content: center;">
          <h1>3</h1>
        </div>
      </div>
    </div>

    <div id="scroll3" style="position: absolute;width: 100%; height: 100%;left:0;top:0;overflow: auto;z-index: 10">
      <div style="height: 400vh">

      </div>
    </div>

  </div>
</template>

<style scoped>
#app {
  width: 100%;
  height: 100%;
}

#scene2 {
  width: 100%;
  height: 100vh;
}
</style>
